<template>
	<div class="box" style="background: #f1f1f1; overflow: hidden;padding: 0;">
		<div class="inpBox">
			<input type="text" placeholder="请输入发票名称" @input="getInit" v-model="invoiceName" />
		</div>
		<ul class="list">
			<li v-for="(item,index) in list" :key="index">
				<div @click='look(item)'>
					<div class="header">
						<van-tag type="primary" class="tag">{{item.money}}元</van-tag>
						<!-- 未报销 -->
						<van-tag type="warning " class="tag" v-if="item.taskType == '0'">{{item.taskTypeName}}</van-tag>
						<!-- 已报销 -->
						<van-tag type="success" class="tag" v-if="item.taskType == '1'">{{item.taskTypeName}}</van-tag>
					</div>
					<h3 class="number">发票名称：{{item.invoiceName}}</h3>
					<div class="content">
						<p>上传人：{{item.userName}}</p>
						<p>文件数量：{{item.fileList.length}}个</p>
						<p>创建时间：{{item.createTime}}</p>
						<!-- <p>编号：{{item._id}}</p> -->
						<!-- <p>备注：{{item.remark}}</p> -->
					</div>
					<van-divider style="margin: 8px 0 ;" />
				</div>
				<div class="btn">
					<button @click="already(item)">核销</button>
					<button style="background-color: #FCC62A;" @click="updata(item)">修改</button>
					<button style="background-color: #FF102B;" @click="del(item)">删除</button>
					<button style="background-color: #1BA035;" @click="uploadFile(item)">下载凭证</button>
				</div>
			</li>
		</ul>

		<!-- 凭证弹框 -->
		<van-popup :show="isShowProve" @close='isShowProve = false' position="bottom">
			<div class="prove">
				<p v-for="(item,index) in prove.fileList" :key="index" @click='saveFile(item)'>
					{{item.fileName}}
				</p>
			</div>
		</van-popup>

		<div class="addBtn">
			<button @click="add">添加报销凭证</button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				list: [],
				isShowProve: false,
				prove: {},
				invoiceName:''
			}
		},

		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.getInit()
		},
		
		onShow(){
			this.getInit()
		},

		methods: {

			// 获取列表
			async getInit() {
				let result = await this.$axios('overallSituation', {
					state: 'look',
					databaseName: "applyForReimbursement",
					userName: this.userInfo.userName,
					invoiceName:this.invoiceName
				}, true)
				if (result.code == 200) {
					this.list = result.data
				}
			},

			// 点击已报销
			async already(row) {
				if (row.taskType == 1) {
					uni.showToast({
						title: '这条数据已经报销',
						icon: "none",
						duration: 2000
					})

					return
				}

				uni.showModal({
					title: '提示',
					content: '您确定这条凭证已经报销了吗？',
					confirmText: "确定", //这块是确定按钮的文字
					cancelText: "取消", //这块是取消的文字
					success: (res) => {
						if (res.confirm) {
							let obj = row
							obj.taskType = 1
							obj.taskTypeName = '已报销'

							this.$axios('overallSituation', {
								state: 'update',
								databaseName: "applyForReimbursement",
								...obj
							}, false).then(res => {
								if (res.code == 200) {
									this.getInit()
								}
							})
						}
					},
				})


			},

			// 点击删除
			del(row) {
				if (row.taskType == 1) {
					uni.showToast({
						title: '这条数据已经报销',
						icon: "none",
						duration: 2000
					})

					return
				}

				uni.showModal({
					title: '提示',
					content: '您确定删除这条报销凭证吗？',
					confirmText: "确定", //这块是确定按钮的文字
					cancelText: "取消", //这块是取消的文字
					success: (res) => {
						if (res.confirm) {
							this.$axios('overallSituation', {
								state: 'delete',
								databaseName: "applyForReimbursement",
								_id: row._id
							}, false).then(res => {
								if (res.code == 200) {
									this.getInit()
								}
							})
						}
					},
				})
			},

			// 点击文件名称保存文件
			saveFile(row) {
				uni.showLoading({
					title: "正在打开附件",
				})
				uni.downloadFile({
					url: row.fileUrl,
					success: res => {
						console.log(res, 'res');
						if (res.statusCode == '200') {
							uni.hideLoading()
							uni.openDocument({
								filePath: res.tempFilePath,
								showMenu: true,
								success() {
									console.log("打开成功");
								},
								fail() {
									console.log('打开失败');
								}
							})
						}
					}
				})
			},

			// 点击修改
			updata(row) {

				if (row.taskType == 1) {
					uni.showToast({
						title: '这条数据已经报销',
						icon: "none",
						duration: 2000
					})

					return
				}

				this.$router(`/subPackages2/pages/applyForReimbursement/add?id=${row._id}`)
			},

			// 查看
			look(row) {
				this.$router(`/subPackages2/pages/applyForReimbursement/add?id=${row._id}&isLook=true`)
			},

			// 下载凭证
			uploadFile(row) {

				if (row.fileList.length == 0) {
					uni.showToast({
						title: "暂无凭证",
						icon: 'none',
						duration: 2000
					})

					return
				}

				this.isShowProve = true
				this.prove = row
			},

			// 添加报销凭证
			add() {
				this.$router("/subPackages2/pages/applyForReimbursement/add")
			}
		}
	}
</script>

<style scoped>
	.inpBox {
		width: 100%;
		height: 5vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.inpBox input {
		width: 97%;
		height: 85%;
		font-size: 12px;
		color: #333;
		border-radius: 10px;
		border: 1px solid #1BA035;
		padding: 0 10px;
		box-sizing: border-box;
	}
	
	.list {
		width: 100%;
		height: 87%;
		overflow-y: auto;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.list li {
		width: 95%;
		background: #fff;
		border-radius: 10px;
		padding: 10px;
		margin: 10px 0 ;
		box-sizing: border-box;
		box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3);
	}

	.list li .header {
		width: 100%;
		height: 30px;
		display: flex;
		align-items: center;
		padding: 10px 0;
		box-sizing: border-box;

	}

	.list li .header .tag {
		margin-right: 8px;
	}

	.list li .number {
		margin-top: 10px;
		font-size: 16px;
		font-weight: 700;
	}

	.list li .content p {
		color: #999;
		margin: 5px 0;
		font-size: 12px;

	}

	.list li .btn {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.list li .btn button {
		padding: 0 20px;
		height: 30px;
		background: #76B1F7;
		color: #fff;
		font-size: 12px;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.addBtn {
		width: 100%;
		height: 8%;
		padding: 10px;
		box-sizing: border-box;
	}

	.addBtn button {
		width: 100%;
		height: 100%;
		background: #76B1F7;
		color: #fff;
		display: flex;
		align-items: center;
		font-size: 12px;
		justify-content: center;
	}

	.prove {
		padding: 10px;
		box-sizing: border-box;
		height: 100%;
		overflow-y: auto;

	}

	.prove p {
		margin: 5px 0;
		color: #1BA035;
		cursor: pointer;
		padding: 10px;
		box-sizing: border-box;
		font-size: 12px;
		border-bottom: 1px solid #999;
		width: 100%;
		overflow: hidden;/* //溢出隐藏 */
		word-break: keep-all;
		white-space: nowrap; /* //文本不折行 */
		text-overflow: ellipsis;/* //显示省略符号来代表被修剪的文本。 */
	}
</style>